<script lang="ts">
import {onMounted, reactive, ref} from "vue";
import { useRoute } from 'vue-router'
import request from "@/utils/request";
export default {
  setup(){
    const  form=reactive({
      orderNumber:"",
      productName:"",
      custAccount:"",
      price:"",
      quantity:"",
      orderPrice:"",
      orderCreateTime:"",
      state:""
    })


    onMounted(() => {
      if(route.params.orderNumber !==":orderNumber"){
        form.orderNumber = route.params.orderNumber.toString()
      }else{
        const searchParams=new URLSearchParams(window.location.search)
        form.orderNumber = searchParams.get('out_trade_no')||'error'
        console.log(form.orderNumber)
      }

      console.log(form.orderNumber)
      order()
    })

    // const buy=()=>{
    //   const url = `http://localhost:8080/alipay/pay?subject=${this.orders.productName}&traceNo=${this.orders.orderNumber}&totalAmount=${this.orders.orderPrice}`;
    //   window.open(url);
    // },


    const route = useRoute()

    const orderForm=ref(null)
    const onSubmit = () => {
      const url = `http://localhost:8081/alipay/pay?subject=${form.productName}&traceNo=${form.orderNumber}&totalAmount=${form.orderPrice}`
      window.location.href=url
      console.log('前往支付')
    }

    const order =async ()=>{
      const res = await request.get(`/order/${form.orderNumber}`)
      form.productName=res.data.data.proName;
      form.custAccount=res.data.data.custAccount;
      form.price=res.data.data.proPrice;
      form.quantity=res.data.data.proNumber;
      form.orderPrice=res.data.data.orderPrice;
      form.orderCreateTime=res.data.data.orderCreateTime;
      form.state=res.data.data.status;
    }

    return{
      form,
      orderForm,
      onSubmit,
      route,
      order
    }
  }
}
</script>

<template>
  <el-form :model="form" label width="200px" class="order-box">
    <el-form-item label="订单号:">
      <span>{{ form.orderNumber }}</span>
    </el-form-item>
    <el-form-item label="商品名称:">
      <span>{{ form.productName }}</span>
    </el-form-item>
    <el-form-item label="用户名:">
      <span>{{ form.custAccount }}</span>
    </el-form-item>
    <el-form-item label="价格:">
      <span>{{ form.price }}</span>
    </el-form-item>
    <el-form-item label="数量:">
      <span>{{ form.quantity }}</span>
    </el-form-item>
    <el-form-item label="订单价格:">
      <span>{{ form.orderPrice }}</span>
    </el-form-item>
    <el-form-item label="订单创建时间:">
      <span>{{ form.orderCreateTime }}</span>
    </el-form-item>
    <el-form-item label="支付状态:">
      <span>{{ form.state }}</span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" v-if="form.state === '未支付'" @click="onSubmit">去支付</el-button>
      <router-link to="/index">
        <el-button type="primary">
          返回首页
        </el-button>
      </router-link>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.order-box {
  border: 1px solid #DCDFE6;
  width: 600px;
  margin: 50px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
</style>